<template>
  <view class="page-container">
    <view class="header">
      <text class="title">修改密码</text>
      <text class="subtitle">请输入旧密码进行验证</text>
    </view>

    <uni-forms ref="form" :modelValue="formData" :rules="rules" class="form-container">
      <uni-forms-item name="oldPassword">
        <uni-easyinput type="password" v-model="formData.oldPassword" placeholder="请输入旧密码..." />
      </uni-forms-item>
      <uni-forms-item name="newPassword">
        <uni-easyinput type="password" v-model="formData.newPassword" placeholder="请输入新密码..." />
      </uni-forms-item>
      <uni-forms-item name="confirmPassword">
        <uni-easyinput type="password" v-model="formData.confirmPassword" placeholder="请再次输入新密码..." />
      </uni-forms-item>
    </uni-forms>

    <view class="submit-button-container">
      <button class="submit-button" @click="submitForm" :loading="isLoading" :disabled="isLoading">
        {{ isLoading ? '提交中...' : '确定' }}
      </button>
    </view>
  </view>
</template>

<script>
import UniForms from "../../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import UniFormsItem from "../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
import UniEasyinput from "../../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import { updatePassword } from "../../../api/user";
import {mapState} from 'vuex'

export default {
  name: "change-password",
  components: { UniForms, UniFormsItem, UniEasyinput },
  computed: {
    ...mapState({
      // 用户信息
      user: state => state.userInfo}
    )
  },
  data() {
    return {
      formData: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      isLoading: false,
      rules: {
        oldPassword: {
          rules: [{
            required: true,
            errorMessage: '请输入旧密码',
          }]
        },
        newPassword: {
          rules: [{
            required: true,
            errorMessage: '请输入新密码',
          }]
        },
        confirmPassword: {
          rules: [{
            required: true,
            errorMessage: '请再次输入新密码',
          }, {
            validateFunction: (rule, value, data, callback) => {
              if (value !== data.newPassword) {
                callback('两次输入的新密码不一致');
              } else {
                callback();
              }
            }
          }]
        }
      }
    };
  },
  methods: {
    submitForm() {
      this.formData.id = this.user.id;
      this.$refs.form.validate().then(async (res) => {
        this.isLoading = true;
        try {
          const { data } = await updatePassword(this.formData);
          if (data.code === 200) {
            uni.showToast({ title: '修改成功', icon: 'success' });
            setTimeout(() => uni.navigateBack(), 2000);
          } else {
            uni.showToast({ title: data.msg || '操作失败', icon: 'none' });
          }
        } catch (error) {
          console.error("密码修改失败:", error);
          uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' });
        } finally {
          this.isLoading = false;
        }
      }).catch(err => {
        console.log('表单校验失败 :', err);
      });
    },
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
  background-color: #ffffff;
  min-height: 100vh;
}
.header {
  margin-bottom: 60rpx;
}
.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}
.subtitle {
  font-size: 28rpx;
  color: #999;
  margin-top: 10rpx;
}
.form-container {
  width: 100%;
}

/* 在 Vue 2 项目中，使用 /deep/ 是完全正确的 */
/deep/ .uni-easyinput__content {
  height: 100rpx;
  background-color: #f5f5f5 !important;
  border: none !important;
  border-radius: 16rpx;
  padding: 0 30rpx;
  font-size: 30rpx;
}

.submit-button-container {
  margin-top: 40rpx;
}
.submit-button {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  background-color: #007aff;
  color: #ffffff;
}
</style>